<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>赣州旅游职业学校随机点名</title>
    <link rel="stylesheet" href="index.css" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <!-- 背景logo区域start -->
    <div class="pg-bg"></div>
    <!-- 背景logo区域end -->

    <!-- 核心内容区域 -->
    <div class="container">
      <!-- 本来想放小logo，需要的话自加 -->
      <!-- <a href="javascript:;">
        <h1>普歌</h1>
      </a> -->
      <!-- 识别名字区域 -->
      <div class="regNameArea">
        <textarea
          name="nameArea"
          id=""
          cols="100"
          rows="15"
          placeholder="填写名字区域,请以英文逗号或换行(回车)隔开名字(可以混写),仅限中文名字,例如'张三,李四,王五,赵六'"
        ></textarea>
        <div class="button">
          <div div class="outline" id="button1">
            开始识别<span class="lines"></span>
          </div>
          <div class="outline" id="button2">
            重新填写<span class="lines"></span>
          </div>
          <div class="outline" id="button3">
            去点名<span class="lines"></span>
          </div>
        </div>
      </div>
      <!-- 点名按钮区域start -->
      <div class="callContent">
        <div class="button">
          <div div class="outline" id="button4">
            开始点名<span class="lines"></span>
          </div>
          <div class="outline" id="button5">
            记录<span class="lines"></span>
          </div>
          <div class="outline" id="button6">
            清空记录<span class="lines"></span>
          </div>
        </div>
        <div class="name"><span id="select">下个幸运观众</span></div>
      </div>
      <div class="videoBack">
        <div class="back">
          <div class="clickback">
            <svg
              t="1620879333774"
              class="icon"
              viewBox="0 0 1177 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2097"
              width="200"
              height="200"
            >
              <path
                d="M1065.1136 1021.3376c-13.1584 0-32.0512-5.3248-46.7968-31.5904l-2.8672-6.9632c-1.2288-3.2768-116.5824-342.3232-375.6032-342.3232-25.0368 0-51.3024 3.2768-77.568 9.4208v115.3536c-2.8672 43.1104-27.904 86.1696-75.9296 86.1696-20.9408 0-42.6496-8.6016-66.4576-25.856L49.152 506.2144c-12.6976-8.192-46.7456-33.2288-48.8448-74.7008-1.6384-32.8192 16.896-63.1808 55.4496-89.4464L428.9024 22.3232C435.456 17.408 459.264 0.9728 487.936 0.9728c13.9776 0 59.904 4.9152 73.472 68.9664l0.8192 8.192v121.088c90.3168 11.4688 321.3824 57.856 462.1824 239.7184 105.8816 136.704 136.2944 318.1056 90.3168 539.7504-9.472 27.904-28.3136 42.6496-49.664 42.6496z m-425.2672-459.6736c223.3344 0 353.024 189.184 412.16 306.5856 15.9744-154.7264-13.9776-282.7776-90.3168-380.928-151.9104-196.608-437.9648-212.5824-440.832-212.992l-37.7856-2.048V83.0464c0-0.4096-0.4096-0.8192-0.4096-1.2288a17.2544 17.2544 0 0 0-4.9152 2.8672L103.8336 404.8384c-22.5792 15.616-24.6272 23.808-24.6272 23.808 0.8192 2.8672 8.6016 9.8816 12.288 11.52l6.5536 4.5056 370.688 319.3344c5.3248 4.096 9.8304 6.144 12.6976 7.3728 0.8192-2.8672 1.6384-6.144 2.048-9.0112v-171.5712l27.904-8.6528c43.52-13.5168 86.6304-20.48 128.512-20.48z"
                fill="#707070"
                p-id="2098"
              ></path>
            </svg>
            返回重写
          </div>
          <div class="tit">
            <svg
              t="1620879071504"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1955"
              width="200"
              height="200"
            >
              <path
                d="M329.525 276.88033332l56.285-58.261 393.996 392.021-393.996 392.021-56.285-58.261 331.786-333.761z"
                fill="#707070"
                p-id="1956"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <!-- 点名按钮区域end -->
      <!-- 生成记录名字区域start -->
      <div class="selectNames"></div>
      <!-- 生成记录名字区域end -->
    </div>
    <script src="jquery-3.5.1.min.js"></script>
    <script>
      //名字列表
      var nameList;
      //随机使用的名单
      var ranNameList = localStorage.getItem("nameList") || [];
      //定义未开始
      var flag = true;
      //全局设置定时器
      var time = null;
      //选中的人名
      var value = "";

      /*
      识别名字
       */
      $("#button1").click(() => {
        let reg = /\p{sc=Han}+[,\s\/、\|\\\{\}]*/gu;
        nameList = $('[name="nameArea"]').val().match(reg);
        if (nameList) {
          nameList.forEach((item, i, arr) => {
            //匹配非中文
            arr[i] = item.replace(/[^\u4e00-\u9fa5]*/g, "");
          });
          localStorage.setItem("nameList", nameList);
          alert(
            "您需要的名字为:\n" +
              nameList +
              "\n----------------------------------------\n共" +
              nameList.length +
              "个名字,名字正确的话就可以去点名啦"
          );
        } else {
          alert("输入有误或为空");
        }
      });

      // 重新填写
      $("#button2").click(() => {
        $('[name="nameArea"]').val("");
      });
      //去点名
      $("#button3").click(() => {
        ranNameList = localStorage.getItem("nameList");
        if (ranNameList) {
          ranNameList = ranNameList.split(",");
          $(".regNameArea")
            .stop()
            .hide(300, () => {
              $(".videoBack").stop().show(300);
              $(".callContent")
                .stop()
                .show(300, () => {
                  isCallShow();
                });
            });
        } else {
          alert("请先输入名字");
        }
      });

      function isCallShow() {
        //是否能点名进行识别,按空格开始点名,回车记录名字,ESC清除记录
        if ($(".callContent").css("display") == "block") {
          window.onkeyup = function (e) {
            if (e.keyCode === 13) {
              $("#button5").click();
            } else if (e.keyCode === 27) {
              $("#button6").click();
            } else if (e.keyCode === 32) {
              $("#button4").click();
            }
          };
        } else if ($(".callContent").css("display") == "none") {
          window.onkeyup = null;
        }
      }
      /**
       *点击随机抽取名字
       */
      $("#button4").click(function () {
        if (flag) {
          $(this).css({ color: "#ff0000" }).html("停止点名");
          //每50毫秒执行一次
          time = setInterval(function () {
            if (ranNameList.length <= 0) {
              // 名字抽取完毕操作
              alert("名字已抽取完毕,请清空记录");

              $("#button4").click();
              value = null;
              $("#select").css({ color: "#fff" }).html("天选之子");
            } else {
              //用下标控制随机选中名字
              index = Math.floor(Math.random() * ranNameList.length);
              //选中的人名
              value = ranNameList[index];
              $("#select").css({ color: "#016dfc" }).html(value);
            }
          }, 30);
          // console.log(ranNameList);
          //取反
          flag = !flag;
        } else {
          $(this).css({ color: "#fff" }).html("开始点名");
          $("#select").css({ color: "#ff0000" });
          clearInterval(time);
          flag = !flag;
        }
      });
      /**
       *记录生成的名字（记录）
       */
      $("#button5").click(function () {
        if (value != null && value != "") {
          //记录名字模板
          var nameblok = `<div class="nameblock">${value}</div>`;
          //向容器中追加名字
          $(".selectNames").append(nameblok);

          // 作无重复名字操作
          ranNameList = ranNameList.filter((item) => {
            return item !== value;
          });
          // console.log(ranNameList);
        } else {
          alert("请先开始");
        }
      });

      /**
       *删除所有生成的名字（清空记录）
       */
      $("#button6").click(function () {
        $(".selectNames").empty();
        ranNameList = localStorage.getItem("nameList").split(",");
        if (value != null && value != "") {
          //删除记录的名字
          $(".selectNames").empty();
        } else {
          alert("无记录(已清空)!");
        }
      });
      //返回上一级
      $(".videoBack ").click(function () {
        $(".videoBack").stop().hide(300);
        $("#button6").click();
        $(".callContent")
          .stop()
          .hide(300, () => {
            $(".regNameArea")
              .stop()
              .show(300, () => {
                isCallShow();
              });
          });
      });
    </script>
  </body>
</html>
